<!-- 投诉内容 -->
<template>
	<view class="content">
		<view>
			<textarea placeholder-style="color:#A5A5A5" placeholder="请描述投诉相关问题" maxlength=100 v-model="value"
				class="input" />
			<view class=""> {{value.split('').length}}/100 </view>
		</view>
		<view class="">
			<view class=""> 上传凭证 <text>（最多3张）</text>
			</view>
		</view>
		<view class="post-pics">
			<view v-for="(picture, index) in pictureList" :key="index">
				<image class="close" src="https://images.linglinggong.net/static/icon2/06.png" mode="aspectFill"
					@click="handleDelete(index)">
				</image>
				<image class="picture" v-if="picture&&picture.indexOf('shiping')==-1" :src="imgPath + picture"
					mode="aspectFill">
				</image>
				<video class="picture" v-else :src="imgPath + picture.replace('shiping','')" object-fit="contain"
					:controls='false'></video>
			</view>
			<view v-if="pictureList.length < 3 ">
				<image src="https://images.linglinggong.net/static/wgc_icon/17.png" mode="aspectFill"
					@click="handleUpload"></image>
			</view>
		</view>
		<view class="" @click="tosu">{{type==1?'提交':'匿名提交'}} </view>
	</view>
</template>
<script>
	export default ({
		data() {
			return {
				value: '',
				pictureList: [], // 发布的图片列表
				imgPath: '',
				task: { //上传参数
					taskVideo: '', //视频
				},
				type: '',
				plate: '',
				title: '',
				orderid: '',
				taskStatus: '',
				taskId: '',
				id: '',
				uploadToken: ''
			}
		},
		onShow() {
			this.imgPath = uni.getStorageSync('imgPath')
			this.getUploadToken()
		},
		onLoad(options) {
			let {
				type,
				orderid,
				title,
				plate,
				taskStatus,
				taskId,
				id
			} = options
			this.id = id
			this.type = type
			this.orderid = orderid
			this.title = title
			this.plate = plate
			this.taskStatus = taskStatus
			this.taskId = taskId
			if (this.type == 1) {
				wx.setNavigationBarTitle({
					title: '申诉内容'
				})
			}
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
		methods: {
			//获取七牛上传TOKEN
			async getUploadToken() {
				let res5 = await this.$fetch(this.$api.get_qiniu_token, {}, "POST");
				uni.setStorageSync("uploadToken", res5.msg);
				this.uploadToken = uni.getStorageSync("uploadToken");
			},
			//删除图片
			handleDelete(index) {
				this.pictureList.splice(index, 1)
				this.task.taskPic = this.pictureList.join()
			},
			// 删除视频
			handleDeleteVideo() {
				this.pictureList.splice(index, 1)
				this.task.taskPic = this.pictureList.join()
			},
			handleUpload() {
				uni.showActionSheet({
					itemList: ['上传图片', '上传视频'],
					// height: 
					success: res => {
						if (res.tapIndex == 0) {
							this.handleUploadImage()
						} else {
							this.handleUploadVideo()
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				})
			},
			//获取本地图片路径
			handleUploadImage() {
				let that = this
				console.log(this.pictureList, 888)
				if (this.pictureList.length > 2) {
					uni.showToast({
						title: '已达上限',
						icon: 'none'
					})
					return
				}
				uni.chooseImage({
					count: 3 - that.pictureList.length, //最多可以选择的图片张数
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						if (res.tempFilePaths.length + that.pictureList.length > 3) return uni.showToast({
							title: '已达上限',
							icon: 'none'
						})
						that.uploadImgs(res.tempFilePaths) //图片的本地文件路径列表res.tempFilePaths
					}
				})
			},
			// 上传图片至七牛
			uploadImgs(urls) {
				urls.forEach(item => {
					uni.uploadFile({
						url: this.$api.uploadPic,
						name: 'file',
						filePath: item,
						formData: {
							token: this.uploadToken
						},
						success: ({
							data
						}) => {
							data = JSON.parse(data)
							this.pictureList.push(data.hash)
						}
					})
				})
			},
			// 获取本地视频路径
			handleUploadVideo() {
				let that = this
				if (this.pictureList.length > 2) {
					uni.showToast({
						title: '已达上限',
						icon: 'none'
					})
					return
				}
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						if (res.size / 1024 / 1024 > 20) return uni.showToast({
							title: "视频大小不能超过20M~",
							icon: "none",
						});
						that.uploadVideo(res.tempFilePath) //图片的本地文件路径列表res.tempFilePaths
					}
				});
			},
			// 上传地址
			getBaseUrl() {
				let baseURL = process.env.NODE_ENV === 'production' ? this.$api.pro // 生产环境接口地址
					: this.$api.dev // 开发环境接口地址 
				return baseURL + this.$api.uploadFile
			},
			// 上传视频至七牛
			uploadVideo(urls) {
				uni.showLoading({
					title: '上传中'
				})
				uni.uploadFile({
					url: this.$api.uploadPic,
					name: 'file',
					filePath: urls,
					method: "POST",
					formData: {
						token: this.uploadToken
					},
					success: ({
						data
					}) => {
						uni.hideLoading()
						if (data.code) {
							uni.showToast({
								title: data.msg
							})
							return
						}
						data = JSON.parse(data)
						data.hash = data.hash + 'shiping'
						this.pictureList.push(data.hash)
					}
				})
			},
			async tosu() {
				if (this.value == '') {
					uni.showToast({
						title: '内容不能为空',
						icon: 'none'
					})
					return
				}
				let list = this.pictureList.map(v => {
					return this.imgPath + v
				})
				if (this.type == 1) {
					let res = await this.$fetch(this.$api.appeal, {
						id: this.id,
						appealContent: this.value,
						image: list.join(',')
					}, 'POST')
					if (res.code) return
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 800)
				} else {
					let res = await this.$fetch(this.$api.complaint, {
						orderId: this.orderid,
						plate: this.plate, //板块
						type: this.title, //类型
						complaintContent: this.value,
						image: list.join(',')
					}, 'POST')
					if (res.code) return
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					uni.redirectTo({
						url: `/pages/app-employer/boss-order-detail/boss-order-detail?id=${this.taskId}&taskStatus=${this.taskStatus}`
					})
				}
			}
		},
	})
</script>
<style lang="scss" scoped>
	.content {
		height: calc(100vh - 88rpx);
		width: 100vw;
		background: #fff;
		overflow: hidden;
		display: flex;
		flex-direction: column;

		&>view:first-child {
			width: 694rpx;
			height: 464rpx;
			background: #F1F1F5 !important;
			border-radius: 12rpx;
			opacity: 1;
			border: 2rpx solid #C2C2C2;
			margin: 40rpx auto;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.input {
				width: 634rpx;
				height: 326rpx;
				margin: 30rpx;
			}

			&>view {
				display: flex;
				justify-content: flex-end;
				margin-right: 22rpx;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #A5A5A5;
			}
		}

		&>view:nth-child(2) {
			margin-left: 28rpx;
			margin-bottom: 30rpx;
			overflow: hidden;

			&>view:first-child {
				font-size: 32rpx;
				font-weight: bold;
				color: #1A1A1A;

				&>text {
					font-size: 28rpx;
					font-weight: 400;
					color: #1A1A1A;
				}
			}
		}

		.post-pics {
			padding-top: 10rpx;
			background: #fff;
			display: grid;
			grid-template-columns: repeat(3, 180rpx);
			grid-template-rows: repeat(2, 180rpx);
			justify-content: space-around;
			gap: 30rpx 30rpx;

			&>view {
				width: 180rpx;
				height: 180rpx;
				position: relative;

				&>.close {
					position: absolute;
					right: -30rpx;
					top: -30rpx;
					width: 34rpx;
					height: 34rpx;
					z-index: 9;
				}
			}

			image {
				width: 180rpx;
				height: 180rpx;

				&:nth-child(3n) {
					margin-right: 10rpx;
				}
			}
		}

		&>view:last-child {
			width: 694rpx;
			height: 88rpx;
			background: #FCC928;
			box-shadow: 2rpx 12rpx 24rpx 2rpx rgba(252, 201, 40, 0.4);
			border-radius: 12rpx;
			opacity: 1;
			display: flex;
			font-weight: bold;
			justify-content: center;
			align-items: center;
			margin-left: 28rpx;
			position: fixed;
			bottom: 88rpx;
			left: 0;
		}
	}

	.picture {
		width: 180rpx;
		height: 180rpx;

		&:nth-child(3n) {
			margin-right: 10rpx;
		}
	}
</style>